<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>阿狗手打·手作订单小票</title>
    <link rel="stylesheet" href="{{url_for('static',filename='css/dogfights-style.css')}}">
</head>
<!-- 复制功能的JS代码 -->
<script>
    // 复制订单编号函数
    function copyOrderId() {
        // 1. 获取订单编号文本
        const orderIdText = document.getElementById('orderIdText').innerText;
        // 2. 创建临时文本框（用于复制非输入框内容）
        const tempInput = document.createElement('input');
        tempInput.value = orderIdText;
        document.body.appendChild(tempInput);
        // 3. 选中并复制文本
        tempInput.select();
        document.execCommand('copy');
        // 4. 移除临时文本框
        document.body.removeChild(tempInput);
        // 5. 显示复制成功提示
        const toast = document.getElementById('copyToast');
        toast.classList.add('show');
        // 6. 2秒后隐藏提示
        setTimeout(() => {
            toast.classList.remove('show');
        }, 2000);
    }
</script>
<body>
    <div class="receipt-container">
        <!-- 订单状态 -->
        <div class="order-status">
            <h3>订单已完成</h3>
            <p>感谢惠顾，欢迎下次光临</p>
        </div>

        <!-- 店铺信息 -->
        <div class="shop-info">
            <h3>{{ shop_name }}</h3>
            <p>{{ shop_address }}</p>
        </div>
        
        <!-- 复制成功提示框 -->
        <div class="copy-toast" id="copyToast">复制成功！</div>

        <!-- 商品列表-->
        <div class="product-list">
            {% for product in products %}
            <div class="product-item">
                <div class="product-image">
                    <!-- 加载产品对应的图片 -->
                    <img src="{{url_for('static',filename=product.image_path)}}" alt="{{ product.name }}">
                </div>
                <div class="product-details">
                    <div class="product-name">{{ product.name }}</div>
                    <div class="product-spec">{{ product.spec }}</div>
                </div>
                <div class="product-price">¥{{ product.price }}<br>x{{ product.quantity }}杯</div>
            </div>
            {% endfor %}
        </div>

        <!-- 总计 -->
        <div class="total-info">共 {{ total_quantity }} 份 &nbsp;&nbsp;&nbsp;&nbsp; 总价 <span>¥{{ total_price }}</span></div>

        <!-- 就餐信息 -->
        <div class="info-section">
            <h3>就餐信息</h3>
            <div class="info-item">
                <div class="info-label">用餐方式</div>
                <div class="info-value">{{ dining_type }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">就餐时间</div>
                <div class="info-value">{{ dining_time }}</div>
            </div>
        </div>

        <!-- 订单信息 -->
        <div class="info-section">
            <h3>订单信息</h3>
            <div class="info-item">
                <div class="info-label">支付方式</div>
                <div class="info-value">{{ payment_method }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">取餐号</div>
                <div class="info-value">{{ pickup_number }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">订单编号</div>
                <!-- 容器包裹编号和复制按钮 -->
                <div class="order-id-container">
                    <div class="info-value" id="orderIdText">{{ order_id }}</div>
                    <!-- 复制按钮，点击触发复制逻辑 -->
                    <button class="copy-btn" onclick="copyOrderId()">复制</button>
                </div>
            </div>
            <div class="info-item">
                <div class="info-label">下单时间</div>
                <div class="info-value">{{ order_time }}</div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="footer">
            如需退款，请联系店员或致电门店
        </div>
    </div>
</body>
</html>